<template>
  <div class="pathList">
    <Header> </Header>
    <section>
      <ul v-if="list.length">
        <li
          @click="goEditInfo(item)"
          v-for="(item, index) in list"
          :key="index"
        >
          <div>
            <span class="aaa">{{ item.name }}</span>
            <span>{{ item.tel }}</span>
          </div>
          <div class="bbb">
            <span :class="item.isDefault == 1 ? 'red' : ''">[默认]</span>
            <span>{{ item.province }}</span>
            <span>{{ item.city }}</span>
            <span>{{ item.county }}</span>
            <span>{{ item.addressDetail }}</span>
          </div>
        </li>
      </ul>
      <h1 v-else>暂无数据请添加数据</h1>
      <div class="add" @click="goEdit">添加地址</div>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Header from "@/components/Path/Header.vue";
import Tabbar from "@/components/Tabbar.vue";
import http from "@/common/request";
import { mapState } from "vuex";
import bus from '@/common/bus'
export default {
  components: { Header, Tabbar },
  data() {
    return {
      pathStatus: false,
    };
  },
  methods: {
    // 点击添加地址
    goEdit() {
      this.$router.push({
        name: "Edit",
      });
    },
    // 点击li
    goEditInfo(item) {
      if (this.pathStatus) {
        bus.$emit('selectPath',JSON.stringify(item))
        this.$router.back();
        return;
      }
      console.log(this.pathStatus);
      this.$router.push({
        name: "EditInfo",
        params: item,
      });
    },
    // 请求地址数据
    async getData() {
      let res = await http.$axios({
        url: "/api/addressData",
        headers: {
          token: true,
        },
      });
      if (res.success) {
        this.$store.commit("path/initData", res.data.resultss);
      }
      console.log(res);
    },
  },
  created() {
    this.getData();
    // console.log(this.$route.query);
    if (this.$route.query.type == "order") {
      this.pathStatus = true;
    }
  },
  computed: {
    ...mapState("path", ["list"]),
  },
};
</script>

<style scoped>
ul {
  display: flex;
  flex-direction: column;
  width: 100vw;
}
ul li {
  margin: 10px 0;
  background-color: #f5f5f5;
  padding: 10px;
  height: 70px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}
li div {
  padding: 5px;
}
li div .aaa {
  padding-right: 15px;
}
li div .red {
  color: red;
}
.bbb span {
  padding-right: 10px;
}
.add {
  text-align: center;
  font-size: 18px;
  padding: 5px;
  background-color: red;
  width: 26vw;
  color: #f5f5f5;
  margin-left: 50%;
  transform: translateX(-13vw);
  margin-top: 10px;
}
.pathList {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
}
section {
  flex: 1;
  overflow: hidden;
}
.tabbar {
  border-top: 2px solid #aaa;
}
</style>